<template>
    <div>
        <el-dialog :title="form.id?'修改公告':'添加公告'" :visible.sync="dialogVisible" width="70%" :before-close="handleClose"
            center>
            <el-form ref="form" :model="form" label-width="80px" label-position="left">
                <el-form-item label="标题">
                    <el-input v-model="form.title" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="公告内容">
                    <Editor v-model="form.content" />
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload class="avatar-uploader" action="http://estate.eshareedu.cn/estate/api/upload/add"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :headers="{Authorization:token}"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio v-model="form.state" :label="1">开启</el-radio>
                    <el-radio v-model="form.state" :label="0">关闭</el-radio>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="qu">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// 富文本编辑器
import Editor from '@/components/富文本编辑器/UEditor.vue';
import { newstype, newsadd } from '@/api/news'
const token = sessionStorage.getItem("token")
export default {
    components: {
        Editor
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        handleClickdata: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {

            token: token,
            form: {
                content: '',
                state: "1",
                addtime: new Date().toLocaleString(),
                edituser: this.$store.state.user.username,
                picture: ''
            },
            imageUrl: '',
            type: [],
            imgage: "http://estate.eshareedu.cn/estate/upload/"
        }
    },
    created() {
        // 公告类型
        this.getnewstype()
    },
    // updated(){
    //     this.form = this.handleClickdata
    //     console.log(this.form);
    // },
    watch: {
        handleClickdata: {
            handler(val) {
                this.form = val
                for (let i in this.form) {
                    this.form[i] = val[i]
                    console.log(i);
                    if (i === 'picture') {
                        this.imageUrl = this.imgage + val[i]
                    }
                }
            },
            deep: true
        }
    },
    methods: {
        // 公告类型
        async getnewstype() {
            let res = await newstype()
            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },
        // 添加
        async add() {
            let res = await newsadd(this.form)
            if (res.errCode == 10000) {
                let msg = this.form.id ? '修改成功' : '添加成功'
                this.$message({
                    message: msg,
                    type: 'success'
                })
                this.form = {}
            }
            this.$emit("isclose", false, true, {})
        },
        qu() {
            this.$emit("isclose", false)
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.$emit("isclose", false)
                })
                .catch(_ => { });
        },
        handleAvatarSuccess(res, file) {
            // console.log(res);
            console.log(file);
            if (res.errCode == 10000) {
                this.form.picture = res.data
            }
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style lang="less" scoped>
.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>